<template>
	<view>
		<view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">姓名</view>
				<view class="input">
					<input type="text" v-model="updata.name" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="input-wrap">
				<view class="type">电话</view>
				<view class="input">
					<input type="number" maxlength="11" v-model="updata.phone" placeholder="请输入电话"/>
				</view>
			</view>
		</view>
		
		<view class="common-btn" @click="handleConfirm">确定</view>
		<view class="del-btn" v-if="id!=0" @click="handleDelEmergency">删除</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 联系人id
				updata: {
					name: '',
					phone: ''
				}
			};
		},
		onLoad(opt) {
			if (opt.id) {
				let {id, name, phone} = opt
				this.id = id
				this.updata.name = name
				this.updata.phone = phone
			}
		},
		methods: {
			handleConfirm() {
				let {name, phone} = this.updata
				let regexPhone = this.$regexPhone
				if(!name.trim()) return uni.showToast({title: '请输入姓名',icon: 'none'});
				if(!regexPhone.test(phone.trim())) return uni.showToast({title: '请输入正确输入电话',icon: 'none'});
				let updata = {name, phone}
				let api = this.$api.editEmergencyContact
				api = this.id ? api+'?id='+this.id : api
				this.$http.post(api, updata).then(res => {
					if (res.code === 200) {
						uni.navigateBack({delta: 1});
					}
				})
			},
			handleDelEmergency() {
				this.$http.delete(this.$api.delEmergencyContact + '?id=' + this.id).then(res => {
					if (res.code === 200) {
						uni.showToast({title: '删除成功'});
						uni.navigateBack({delta: 1});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.common-wrap {
	border-radius: 12rpx;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	.input-wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		font-size: 30rpx;
		&:last-child {
			border: none;
		}
		.type {
			font-size: 30rpx;
		}
		.input {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			display: flex;
			input {
				padding-right: 6rpx;
			}
		}
	}
}

.common-btn {
	width: 580rpx;
	margin-top: 100rpx;
	box-shadow: none;
}
.del-btn {
	width: 580rpx;
	margin: 40rpx auto;
	border: 1px solid $red;
	color: $red;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	border-radius:40px;
}
</style>
